<template>
	<sl-page :isDisplay="false" :safeBottom="false">
		<view class="category" v-if="!isLoading">
			
			<view class="category-segmented">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					activeColor="#333333" @clickItem="onClickItem" />
			</view>
			<view class="category-line">
			</view>
			<SecondCategory class="SecondCategory" :firstCategoryId.sync="firstCategoryId" :targetPage="targetPage" :type="type" />
		</view>
	</sl-page>
</template>

<script>
	import CategoryApi from '@/api/category/category.js';
	import Constants from '@/constants';
	import Search from '@/pages/components/search/search.vue';
	import SecondCategory from '@/pages/category/secondCategory.vue';
	//
	export default {
		//
		name: 'categoryIndex',
		//
		mixins: [Constants],
		//
		components: {
			Search,
			SecondCategory
		},
		//
		data() {
			return {
				options: {},
				//一级分类
				firstCategoryDatas: [],
				firstCategoryId: '',
				//跳转到指定页面
				targetPage: '',
				//1.游戏，2.商品
				type: '',
				//正在加载中
				isLoading: true,
				//分段器
				items: [],
				current: 0,
				styleType: 'text'
			};
		},
		//
		onLoad(options) {
			this.options = options;
			this.initPara();
			//加载页面数据
			this.getPageData();

		},
		
		//
		methods: {
			//初始化参数
			initPara() {
				this.targetPage = this.options.targetPage ? this.options.targetPage : this.pages.goodsIndexPage;
				this.type = this.options.type ? this.options.type : this.categoryType.goods;
				this.current = 0;
			},
			//获取页面数据
			getPageData() {
				const app = this;
				app.isLoading = true;
				Promise.all([this.loadCategory()])
					.then(result => {
						this.firstCategoryDatas = result[0];
						this.firstCategoryId = this.firstCategoryDatas[0].id
						//
						this.items = this.firstCategoryDatas.map(item => item.name);
					})
					.finally(() => (app.isLoading = false));
			},
			//加载分类数据
			loadCategory: async function() {
				let res = await CategoryApi.query(this.type, 1);
				return res.obj || {};
			},
			//点击分类
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.firstCategoryId = this.firstCategoryDatas[this.current].id
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.category {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		flex:1;
		display: flex;
		flex-direction: column;
		.SecondCategory{
			flex: 1;
			display: flex;
		}
		.category-segmented {
			background-color: $uni-bg-color;
			padding-top: 150rpx;
		}

		.category-line {
			height: 16rpx;
		}
	}
</style>